<template>
	<view class="template-advertise">
		<!-- 顶部自定义导航 -->
		<tn-nav-bar fixed alpha customBack>
			<view slot="back" class='tn-custom-nav-bar__back tn-navbg' @click="goBack">
				<text class='icon tn-icon-left-arrow'></text>
			</view>
		</tn-nav-bar>


		<!-- 轮播图 -->
		<view class="banner">

			<swiper class="card-swiper" :circular="true" :autoplay="true" duration="500" interval="5000"
				@change="cardSwiper">
				<swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
					<view class="swiper-item image-banner">
						<image :src="item.url" mode="modefill" v-if="item.type=='image'"></image>
					</view>
					<!-- <view class="swiper-item-text">
						<view class="tn-text-xxl tn-text-bold tn-color-white">{{item.title}}</view>
						<view class="tn-text-bold tn-color-white tn-padding-top-xs" style="font-size: 60rpx;">
							{{item.name}}
						</view>
						<view class="tn-text-sm tn-text-bold tn-color-white tn-padding-top-sm tn-padding-bottom-sm">
							{{item.text}}
						</view>
					</view> -->
				</swiper-item>
			</swiper>
			<view class="indication">
				<block v-for="(item,index) in swiperList" :key="index">
					<view class="spot" :class="cardCur==index?'active':''"></view>
				</block>
			</view>
		</view>


		<view class="adver-wrap tn-bg-white">
    <view class="king-list tn-margin-top-sm">
      <!-- 使用 v-for 遍历剧情列表 -->
      <block v-for="(item, index) in juqingList" :key="index">
        <view class="king-icon">
          <text class='tn-icon-like-fill tn-color-white tn-text-lg tn-bg-blue tn-round tn-padding-xs'></text>
          <text class='tn-text-xl tn-margin-left'>{{item.storyTitle || '暂无标题'}}</text>
        </view>
        <!-- 修改模板部分 -->
        <view class='king-item tn-color-red tn-icon-circle-fill'>
          <view>
            <view class="resume2" @click="tojuqing(item.id)">
              <text class="story-text">{{item.storySummary || '暂无内容'}}</text>
            </view>
          </view>
        </view>
      </block>
    </view>
  </view>
	


	</view>
	
</template>

<script>
	import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
	import api from '@/utils/index.js'

	export default {
		name: 'templateAdvertise',
		mixins: [template_page_mixin],
		data() {
			return {
				cardCur: 0,
				swiperList: [{
					id: 0,
					type: 'image',
					// title: 'BUG再多',
					// name: '也别忘了',
					// text: '我无限续杯',
					url: '/static/index/charaterDetail/1.png',
				}, {
					id: 1,
					type: 'image',
					// title: '图鸟南南',
					// name: '欢迎加入东东们',
					// text: '如果你也有不错的作品',
					url: '/static/index/charaterDetail/2.png',
				}, {
					id: 2,
					type: 'image',
					// title: '图鸟西西',
					// name: '一起玩转scss',
					// text: '用最少的代码做最骚的效果',
					url: '/static/index/charaterDetail/3.png',
				}],

				// 新增剧情相关数据
				dataForm: {
					pageNum: 1,
					pageSize: 10,
					personId: 0,
				},
				juqingList: [], // 剧情列表
				total: 0, // 总条数
				loading: false, // 加载状态

				show1: false,

				show2: false,
				maskCloseable: true,

				topInfo: {
					height: 0,
				},
				topInfoTranslateY: 0,
				prevScrollTop: 0
			}
		},
		onLoad(options) {
			// 如果有传入personId，则使用传入的值
			if (options.personId) {
				this.dataForm.personId = options.personId
			}
			console.log(this.dataForm.personId);
			// 获取剧情列表
			this.getCharaterDetail()
		},
		onReady() {
			this.getTopInfoRect()
		},
		onPageScroll(e) {
			this.handlePageScroll(e.scrollTop)
		},
		methods: {
			// cardSwiper
			cardSwiper(e) {
				this.cardCur = e.detail.current
			},
			// 预览作者图片
			previewQRCodeImage() {
				wx.previewImage({
					urls: ['https://resource.tuniaokj.com/images/advertise/qrcode.jpg']
				})
			},
			// 获取顶部销售信息容器相关信息
			getTopInfoRect() {
				this._tGetRect('#top-info').then((res) => {
					if (!res) {
						setTimeout(() => {
							this.getTopInfoRect()
						}, 50)
						return
					}
					this.topInfo.height = res.height
				})
			},
			// 处理页面滚动事件
			handlePageScroll(scrollTop) {
				console.log(scrollTop);
				if (this.prevScrollTop > scrollTop) {

					// 内容下滑，即手指从下往上滚
					this.topInfoTranslateY = 0
				} else {
					// 内容上滑，即手指从上往下滚
					if (scrollTop > this.topInfo.height) {
						this.topInfoTranslateY = this.topInfo.height
					}

				}

				this.prevScrollTop = scrollTop
			},

			// 弹出模态框
			showModal(event) {
				this.openModal()
			},
			// 打开模态框
			openModal() {
				this.show1 = true
			},

			// 弹出压屏窗
			showLandscape() {
				this.openLandscape()
			},
			// 打开压屏窗
			openLandscape() {
				this.show2 = true
			},
			// 关闭压屏窗
			closeLandscape() {
				this.show2 = false
			},

			// 跳转到图鸟UI
			navTuniaoUI() {
				uni.navigateToMiniProgram({
					appId: 'wxf3d81a452b88ff4b'
				})
			},
			// 获取角色剧情列表
			async getCharaterDetail() {
				
				try {
					this.loading = true
					const res = await api.charaterDetail.getJuqing(this.dataForm)
					console.log('获取角色剧情列表成功:', res)
					if (res.data.code === 200) {
						// 如果是第一页，直接赋值
						if (this.dataForm.pageNum === 1) {
							this.juqingList = res.data.rows || []
						} else {
							// 如果是加载更多，则追加数据
							this.juqingList = [...this.juqingList, ...(res.data.rows || [])]
						}
						this.total = res.data.total || 0
					} else {
						uni.showToast({
							title: res.msg || '获取角色剧情列表失败',
							icon: 'none'
						})
					}
				} catch (error) {
					console.error('获取角色剧情列表错误:', error)
					uni.showToast({
						title: '获取角色剧情列表失败',
						icon: 'none'
					})
				} finally {
					this.loading = false
				}
			},
			
			// 加载更多
			loadMore() {
				if (this.juqingList.length >= this.total) return
				this.dataForm.pageNum++
				this.getCharaterDetail()
			},

			// 修改跳转剧情方法
			tojuqing(id) {
				if (!id) {
					uni.showToast({
						title: '剧情ID不能为空',
						icon: 'none'
					})
					return
				}
				uni.navigateTo({
					url: `/homePages/juqing?id=${id}&personId=${this.dataForm.personId}`,
					fail: (err) => {
						console.error('跳转失败:', err)
						uni.showToast({
							title: '页面跳转失败',
							icon: 'none'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 胶囊导航栏样式 */
	.tn-custom-nav-bar__back {
		width: auto;
		height: auto;
		position: relative;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-left: 30rpx;
		
		.icon {
			font-size: 46rpx;
			color: #FFFFFF;
			text-shadow: 2rpx 2rpx 4rpx rgba(0, 0, 0, 0.4);
		}
		
		&:active {
			.icon {
				transform: scale(0.92);
			}
		}
	}

	/* 导航栏背景 */
	.tn-navbg {
		background: none !important;
		box-shadow: none;
		padding-left: 0;
	}

	/* 内容 */
	.adver-wrap {
		position: relative;
		z-index: 1;
		// padding: 20rpx 30rpx;
		margin-top: 650rpx;
		border-radius: 40rpx 40rpx 0 0;
		background: linear-gradient(180deg, #FFFFFF, #F8F9FA);
		box-shadow: 0 -8rpx 24rpx rgba(0, 0, 0, 0.08);
		padding-top: 20rpx;
	}

	/* 毛玻璃*/
	.dd-glass {
		width: 100%;
		backdrop-filter: blur(20rpx);
		-webkit-backdrop-filter: blur(20rpx);
	}


	/* 用户头像 start */
	.user-image {
		width: 90rpx;
		height: 90rpx;
		position: relative;
	}

	.user-pic {
		background-size: cover;
		background-repeat: no-repeat;
		// background-attachment:fixed;
		background-position: top;
		border-radius: 50%;
		overflow: hidden;
		background-color: #FFFFFF;
	}

	/* 富文本图示意 start */
	.detail-img {
		z-index: -1;
		padding-bottom: 40rpx;

		image {
			width: 100%;
			margin: 20rpx 0;
			// height: 3373rpx;
			// z-index: -1;
		}
	}


	.banner {
		position: fixed;
		top: 0;
		width: 100%;
		transition: all 0.25s ease-out;
		will-change: transform;
		z-index: -1;
	}

	/* 轮播视觉差 start */
	.card-swiper {
		height: 800rpx !important;
	}

	.card-swiper swiper-item {

		width: 750rpx !important;
		left: 0rpx;
		box-sizing: border-box;
		// padding: 0rpx 30rpx 90rpx 30rpx;
		overflow: initial;
	}

	.card-swiper swiper-item .swiper-item {
		width: 100%;
		display: block;
		height: 100%;
		transform: scale(1);
		transition: all 0.2s ease-in 0s;
		will-change: transform;
		overflow: hidden;
	}

	.card-swiper swiper-item.cur .swiper-item {
		transform: none;
		transition: all 0.2s ease-in 0s;
		will-change: transform;
	}

	.card-swiper swiper-item .swiper-item-text {
		margin-top: -320rpx;
		width: 100%;
		display: block;
		height: 50%;
		border-radius: 10rpx;
		transform: translate(100rpx, -60rpx) scale(0.9, 0.9);
		transition: all 0.6s ease 0s;
		will-change: transform;
		overflow: hidden;
	}

	.card-swiper swiper-item.cur .swiper-item-text {
		margin-top: -380rpx;
		width: 100%;
		transform: translate(0rpx, 0rpx) scale(0.9, 0.9);
		transition: all 0.6s ease 0s;
		will-change: transform;
	}

	.image-banner {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.image-banner image {
		width: 100%;
		height: 100%;
	}

	/* 轮播指示点 start*/
	.indication {
		z-index: 9999;
		width: 100%;
		height: 36rpx;
		position: absolute;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		bottom: 50rpx;
	}

	.spot {
		width: 14rpx;
		height: 14rpx;
		background: rgba(255, 255, 255, 0.4);
		border-radius: 7rpx;
		margin: 0 8rpx !important;
		transition: all 0.4s ease;
	}

	.spot.active {
		width: 40rpx;
		background: #FFFFFF;
		box-shadow: 0 0 20rpx rgba(255, 255, 255, 0.6);
	}

	/* 底部悬浮按钮 start*/
	.tn-tabbar-height {
		min-height: 120rpx;
		height: calc(140rpx + env(safe-area-inset-bottom) / 2);
	}

	.tn-footerfixed {
		position: fixed;
		background-color: rgba(255, 255, 255, 0.5);
		box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
		bottom: 0;
		width: 100%;
		transition: all 0.25s ease-out;
		will-change: transform;
		z-index: 100;
	}

	/* 简历内容 */
	.king-list {
		display: block;
		background-color: #ffffff;
		
		.king-icon {
			width: 100%;
			text-align: left;
			padding: 30rpx 40rpx;
			font-size: 26rpx;
			color: #888;
			display: block;
			
			.tn-icon-like-fill {
				font-size: 40rpx;
				padding: 20rpx;
				background: linear-gradient(135deg, #FF6B6B, #FFA0A0) !important;
				border-radius: 16rpx;
				box-shadow: 0 4rpx 12rpx rgba(255, 107, 107, 0.2);
			}
			
			.tn-margin-left {
				margin-left: 24rpx;
				font-size: 32rpx;
				font-weight: 600;
				background: linear-gradient(45deg, #2C3E50, #3498DB);
				-webkit-background-clip: text;
				color: transparent;
			}
		}
		
		.king-item {
			background: rgba(255, 255, 255, 0.98);
			margin: 0 30rpx 30rpx;
			padding: 30rpx;
			border-radius: 20rpx;
			box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.06);
			position: relative;
			border: 1rpx solid rgba(230, 230, 230, 0.5);
			
			&::before {
				display: none;
			}
			
			&::after {
				content: "";
				position: absolute;
				left: 0;
				top: 0;
				width: 6rpx;
				height: 100%;
				background: linear-gradient(to bottom, #FF6B6B, #4FACFE);
				border-radius: 6rpx 0 0 6rpx;
			}
			
			.resume2 {
				color: #34495E;
				line-height: 1.8;
				font-size: 28rpx;
				letter-spacing: 2rpx;
				padding: 20rpx 10rpx;
				
				text {
					color: #34495E;
				}
				
				&:active {
					background: rgba(52, 73, 94, 0.05);
					border-radius: 12rpx;
				}
			}
		}
	}

	.king-list>.king-item {
		padding: 30rpx 30rpx 30rpx 120rpx;
		position: relative;
		display: block;
		z-index: 0;
	}

	.king-list>.king-item::after {
		content: "";
		display: block;
		position: absolute;
		width: 1rpx;
		background-color: #E6E6E6;
		left: 60rpx;
		height: 100%;
		top: 0;
		z-index: 8;
	}

	.king-list>.king-item::before {
		display: block;
		position: absolute;
		top: 36rpx;
		z-index: 9;
		background-color: #ffffff;
		width: 50rpx;
		height: 50rpx;
		text-align: center;
		border: none;
		line-height: 50rpx;
		left: 36rpx;
	}


	/* 名片微调 */
	.img-solid {
		border: 2rpx solid #eee;
	}

	.share-img {
		position: fixed;
		/* padding: 10rpx; */
		width: 100rpx;
		height: 100rpx;
		/* top: 680rpx; */
		bottom: 200rpx;
		right: 20rpx;
		z-index: 1024;
		opacity: 0.8;
		box-shadow: 0rpx 8rpx 30rpx 0rpx rgba(0, 0, 0, 0.3);
		border: none;
		border: 6rpx solid rgba(255, 255, 255, 0);
	}

	.resume {
		display: flex;
		justify-content: space-between;
		padding-top: 10rpx;
		border-radius: 6rpx;
		color: #666;
		line-height: 1.6;
	}

	.resume+.resume {
		margin-top: 20rpx;
	}

	.resume2 {
		padding-top: 10rpx;
		border-radius: 6rpx;
		display: block;
		color: #666;
		line-height: 1.6;
		text-align: justify;
	}

	/* 间隔线 start*/
	.tn-strip-bottom {
		width: 100%;
		border-bottom: 20rpx solid rgba(241, 241, 241, 0.8);
	}

	/* 间隔线 end*/


	.bg-img-cont {
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		height: 350rpx;
		margin: 20rpx 0;
		border-radius: 8rpx;
	}

	.story-text {
          display: block;
          text-align: justify;
          text-indent: 2em;
          color: #34495E;
        }

	// .button-no {
	//   border: none;
	//   width: 100%;
	//   height: 100%;
	//   background-color: rgba(0, 0, 0, 0);
	// }


	/* 标签内容 start*/
	.tn-tag-content {
		&__item {
			display: inline-block;
			line-height: 45rpx;
			padding: 10rpx 30rpx;
			margin: 0rpx 20rpx 25rpx 0rpx;
			
			&--prefix {
				padding-right: 10rpx;
			}
		}
	}

	/* 标签内容 end*/

	.see {
		display: flex;
		justify-content: space-between;
		padding-top: 10rpx;
		border-radius: 6rpx;
		color: #666;
		line-height: 1.6;
	}
</style>
